<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactive-原理.html</title>
</head>
<body>
    <script>
        // 原数据
        let obj = {
            name: '德玛西亚',
            age: '11'
        }

        //#region
        /*
         * 模拟 vue2 的响应式
         * Object.defineProperty
         */
        /*let o = {}
        Object.defineProperty(o, 'name', {
            configurable: true,
            get(){
                console.log('有人读取了 name 属性')
                return obj.name
            },
            set(value){
                console.log('有人修改了 name 属性')
                obj.name = value
            }
        })
        Object.defineProperty(o, 'age', {
            configurable: true,
            get(){
                console.log('有人读取了 age 属性')
                return obj.age
            },
            set(value){
                console.log('有人修改了 age 属性')
                obj.age = value
            }
        })*/
        //#endregion
    
        /*
         * 模拟 vue3 的响应式
         * Proxy 代理对象 Reflect 映射
         */
        // o ---> 代理数据   obj ---> 原数据
        const o = new Proxy(obj, {
            // target 绑定的原数据是谁 target 就是谁
            get(target, propName){
                console.log(`有人读取了 ${propName} 属性`)
                return Reflect.get(target, propName)
            },
            set(target, propName, value){
                console.log(`有人修改了 ${propName} 属性`)
                return Reflect.set(target, propName, value)
            },
            deleteProperty(target, propName){
                console.log(`有人删除了 ${propName} 属性`)
                return Reflect.deleteProperty(target, propName)
            }
        })
    </script>
</body>
</html>